<template>
    <div>
        <span class="title1">房源基建 /</span>
        <span class="title2">床位管理</span>
        <el-button class="b1" type="primary" @click="openBatchDialog1">批量设置</el-button>
        <el-dialog
                :before-close="handleCloseBatch"
                :visible.sync="dialogVisibleAdd"
                title="批量设置房间"
                width="30%">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <div class="bb3" style="display: flex; align-items: center;">
                            <div id="colorBlock1"
                                 style="width: 6px; height: 16px; border-radius: 3px; background: #05237b; margin-left: 10px;"></div>
                            <span class="bb2" style="margin-left: 5px;">房间设置</span>
                        </div>
                        <div>
                            <el-form ref="form" :model="form" label-width="120px">
                                <el-form-item label="编号前缀">
                                    <el-input v-model="form.buildingId"></el-input>
                                </el-form-item>
                                <el-form-item class="teanName1" label="编号位数" prop="digit">
                                    <el-input v-model="dd" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="楼层号">
                                    <el-input v-model="form.floor"></el-input>
                                </el-form-item>
                                <el-form-item label="房间数量">
                                    <el-input v-model="form.roomNumber"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm">提交</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
        <el-button class="b2" type="primary" @click="openBatchDialog2">添加房间</el-button>
        <el-dialog
                :before-close="handleCloseBatch"
                :visible.sync="dialogVisibleBatch"
                title="添加房间"
                width="30%">
            <el-row :gutter="20">
                <div class="grid-content bg-purple">
                    <div>
                        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm"
                                 label-width="100px">
                            <el-form-item class="teanName" label="楼栋号" prop="buildingId">
                                <el-input v-model="ruleForm.buildingId"></el-input>
                            </el-form-item>
                            <el-form-item class="teanName1" label="房间号" prop="roomId">
                                <el-input v-model="ruleForm.roomId"></el-input>
                            </el-form-item>
                            <el-form-item class="teanName" label="编号前缀" prop="prefix">
                                <el-input v-model="ruleForm.prefix" disabled></el-input>
                            </el-form-item>
                            <el-form-item class="teanName" label="编号位数" prop="digit">
                                <el-input v-model="ruleForm.digit" disabled></el-input>
                            </el-form-item>
                            <el-form-item class="teanName1" label="楼层号" prop="floor">
                                <el-input v-model="ruleForm.floor" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="床位数量" prop="bedNumber">
                                <el-input v-model="ruleForm.bedNumber"></el-input>
                            </el-form-item>
                            <el-form-item label="默认价格" prop="price">
                                <el-input v-model="ruleForm.price"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit1">确 定</el-button>
            </span>
        </el-dialog>
        <div class="card"></div>
        <el-card style="margin-left: 15px;margin-right: 15px">
            <el-row :gutter="10">
                <el-col :span="4">
                </el-col>
                <el-col :span="4">
                </el-col>
            </el-row>
            <el-table
                    :data="users"
                    stripe
                    style="width: 100%">
                <el-table-column label="房间号">
                    <template slot-scope="scope">
                        <span class="teanName1">{{ scope.row.roomId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="房间编号"
                        prop="num1">
                    <template slot-scope="scope">
                        <span class="teanName1">{{ scope.row.digit }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="所在楼层"
                        prop="floor">
                    <template slot-scope="scope">
                        <span class="teanName2">{{ scope.row.floor }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="床位数"
                        prop="num2">
                    <template slot-scope="scope">
                        <span class="teanName3">{{ scope.row.bedNumber }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="是否启用"
                        prop="whether">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.enabled"
                                active-color="#1890FF"
                                active-text="开"
                                disabled
                                inactive-color="#ff4949"
                                inactive-text="关">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="房价价格"
                        prop="price">
                    <template slot-scope="scope">
                        <span class="teanName4">{{ scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        prop="do">
                    <template slot-scope="scope">
                        <el-button
                                size="16px"
                                type="text"
                                @click="handleEdit(scope.row)">编辑
                        </el-button>
                        <el-button
                                size="16px"
                                type="text"
                                @click="removeBtn(scope.row.roomId)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="query.pageNo"
                    :page-size="query.pageSize"
                    :page-sizes="[10, 20, 40, 100]"
                    :total="total"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    style="margin-top: 20px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </el-card>
        <ForthEditDialog ref="userEdit" @ok="getUserList"/>
    </div>
</template>
<script src="//unpkg.com/vue@2/dist/vue.js">
</script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<script>
import {userList} from '../../../../api/forth'
import ForthEditDialog from '../../components/forth/ForthEditDialog.vue'
import {removeUser} from '../../../../api/forth'
import {editUser} from '../../../../api/forth'
import {addUser} from '../../../../api/forth'
import axios from 'axios'

export default {
  name: 'forth',
  components: {
    ForthEditDialog
  },
  data: function () {
    return {
      dd: '3',
      total: 0,
      users: [],
      editUser: {},
      ruleForm: {
        roomId: '',
        floor: '',
        buildingId: '',
        prefix: '',
        digit: '',
        roomNumber: '',
        bedNumber: '',
        price: ''
      },
      roles: [{
        value: 'A',
        label: 'A'
      }, {
        value: 'B',
        label: 'B'
      }, {
        value: 'C',
        label: 'C'
      }, {
        value: 'D',
        label: 'D'
      }, {
        value: 'E',
        label: 'E'
      }, {
        value: 'F',
        label: 'F'
      }
      ],
      rules: {
        roomId: [
          {required: true}
        ],
        roomNumber: [
          {required: true, message: '请输入正确房间数量', trigger: 'change'}
        ],
        bedNumber: [
          {required: true, message: '请输入正确床位数量', trigger: 'change'}
        ],
        price: [
          {required: true, message: '请输入正确价格', trigger: 'change'}
        ]
      },
      form: {
            buildingId: '',
            floor: '',
            roomNumber: ''
      },
      // value: false
      dialogVisibleBatch: false,
      dialogVisibleAdd: false,
      dialogVisibleCatch: false,
      shouldShow: false,
      query: {
        roomId: '',
        prefix: '',
        digit: '',
        roomNumber: '',
        bedNumber: '',
        price: '',
        floor: ''
      },
      tabledata:[{floor: 1,roomNumber: ''},{floor: 2,roomNumber: ''},{floor: 3,roomNumber: ''},{floor: 4,roomNumber: ''}]
    }
  },
  methods: {
      submitForm() {
          this.form.deleted = 0;
          this.form.enabled = 1;
          axios.post('/api/bedManagment/generateRooms', this.form)
              .then(response => {
                  this.$message.success('生成成功');
                  this.dialogVisibleAdd = false
              }
              )
              .catch(error => {
                  console.error(error);
                  this.$message.error('生成失败');
              });
      },
    show (forth, roles) {
      this.ruleForm = JSON.parse(JSON.stringify(forth))
      this.roles = roles
      this.dialogVisibleBatch = true
    },
    submit () {
      this.$refs.ruleForm.validate(flag => {
        if (flag) {
          editUser(this.ruleForm).then(res => {
            if (res.data === true) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.dialogVisibleBatch = false
              this.getUserList()
            }
          })
        }
      })
    },
    submit1 () {
      this.$refs.ruleForm.validate(flag => {
        if (flag) {
          addUser(this.ruleForm).then(res => {
            if (res.data === true) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.dialogVisibleBatch = false
              this.$emit('ok')
            }
          })
        }
      })
    },
    removeBtn (roomId) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = {
          roomId: roomId
        }
        removeUser(obj).then(res => {
          if (res.data === true) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getUserList()
          } else {
            this.$message({
              message: '删除失败',
              type: 'warning'
            })
          }
        })
      }).catch(() => {
      })
    },
    getUserList () {
      userList(this.query).then(res => {
        this.users = res.data.records
        this.total = res.data.total
      })
    },
    handleSizeChange (value) {
      // 把页面大小重复赋值，然后重新获取数据
      this.query.pageSize = value
      this.getUserList()
    },
    handleCurrentChange (value) {
      this.query.pageNo = value
      this.getUserList()
    },
    handleEdit (row) {
      this.$refs.userEdit.show(row, this.roles)
      // 从当前组件获取所有有名字的组件然后获取userEdit,在调用它的方法
    },
    handleCloseBatch (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    handleCloseAdd (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    openBatchDialog1 () {
      // 打开弹窗
      this.dialogVisibleAdd = true
    },
    openBatchDialog2 () {
      // 打开弹窗
      this.dialogVisibleBatch = true
      this.getUserList()
    }
  },
  created () {
    this.getUserList()
  },
  watch: {
    'ruleForm.digit': function (newDigit) {
      const digitStr = newDigit.toString()
      if (digitStr.charAt(0) === '1' && digitStr.length === 3) {
        this.ruleForm.floor = 1 // 以1开头的三位数统一归为1类
      } else if (digitStr.charAt(0) === '2' && digitStr.length === 3) {
        this.ruleForm.floor = 2
      } else if (digitStr.charAt(0) === '3' && digitStr.length === 3) {
        this.ruleForm.floor = 3
      } else if (digitStr.charAt(0) === '4' && digitStr.length === 3) {
        this.ruleForm.floor = 4
      } else if (digitStr.charAt(0) === '5' && digitStr.length === 3) {
        this.ruleForm.floor = 5
      } else if (digitStr.charAt(0) === '6' && digitStr.length === 3) {
        this.ruleForm.floor = 6
      }
    },
    'ruleForm.roomId': function (newRoomId) {
      this.ruleForm.prefix = this.ruleForm.roomId.charAt(0)
      this.ruleForm.buildingId = this.ruleForm.roomId.charAt(0)
      const numPart = this.ruleForm.roomId.substring(1, 4)  // 获取第二到第四位的数字部分
      this.ruleForm.digit = parseInt(numPart)
    }
  }
}
</script>

<style scoped>
@import "../../../../assets/styles/total/forth.css";

</style>
